<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Track Line with Legend</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Track Line with Legend</p>
<hr class="separator">
<div class="content"><img src="images/tracklegend_web.png" width='630' height='400'><br><br>
This sample program demonstrates a track cursor programmed with the following features:<br><br>
<ul>
<li>A vertical line that follows the mouse cursor on the plot area and snaps to the nearest x data value.<br><br>
<li>Small dots that shows the data points at the nearest x data value.<br><br>
<li>Dynamically updated legend entries that shows the value of the data points at the nearest x data value.<br></ul>
On the server side, the code draws the chart as usual, and outputs both the image and the <a href="jschartmodel.htm">Javascript Chart Model</a> of the chart.<br><br>
On the browser side, in the window onload event handler, Javascript is used to set up the event handler for the <a href="JsChartViewer.MouseMovePlotArea.htm">MouseMovePlotArea</a>, <a href="JsChartViewer.TouchStartPlotArea.htm">TouchStartPlotArea</a>, <a href="JsChartViewer.TouchMovePlotArea.htm">TouchMovePlotArea</a> , <a href="JsChartViewer.ChartMove.htm">ChartMove</a> and <a href="JsChartViewer.Now.htm">Now</a> events. The event handler calls <b>trackLineLegend</b> to draw the track cursor.<br><br>
The <b>trackLineLegend</b> Javascript function is the routine that draws the track cursor. Its key elements are:<br><br>
<ul>
<li>The code first uses <a href="JsChartViewer.hideObj.htm">JsChartViewer.hideObj</a> to clear the previous track cursor, if any.<br><br>
<li>The nearest x data value is obtained using <a href="JsXYChart.getNearestXValue.htm">JsXYChart.getNearestXValue</a>.<br><br>
<li>A vertical line is drawn at the nearest x data value using <a href="JsChartViewer.drawVLine.htm">JsChartViewer.drawVLine</a>.<br><br>
<li>The code then iterates through all data sets in all layers to find all the data points at the nearest x data value. For each of these points, it formats a legend entry for the point, which consists of a colored square as the icon (creating using <a href="JsChartViewer.htmlRect.htm">JsChartViewer.htmlRect</a>), the data set name (obtained using <a href="JsDataSet.getDataName.htm">JsDataSet.getDataName</a>), and data value (obtained using <a href="JsDataSet.getValue.htm">JsDataSet.getValue</a>). The code also gets the point's y position using <a href="DataSet.getPosition.htm">DataSet.getPosition</a>, and draws a square dot using <a href="JsChartViewer.showTextBox.htm">JsChartViewer.showTextBox</a> and <a href="JsChartViewer.htmlRect.htm">JsChartViewer.htmlRect</a>.<br><br>
<li>Finally, the code combines all the legend entries and draws them at the top of the plot area using <a href="JsChartViewer.showTextBox.htm">JsChartViewer.showTextBox</a>.<br></ul>
</div><p class="heading1a">Source Code Listing</p><div class="content">
<b>[JSP Version]</b> jspdemo/tracklegend.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// Data for the chart as 3 random data series
RanSeries r = new RanSeries(127);
double[] data0 = r.getSeries(100, 100, -15, 15);
double[] data1 = r.getSeries(100, 150, -15, 15);
double[] data2 = r.getSeries(100, 200, -15, 15);
Date[] timeStamps = r.getDateSeries(100, new GregorianCalendar(2011, 0, 1).getTime(), 86400);

// Create a XYChart object of size 640 x 400 pixels
XYChart c = new XYChart(640, 400);

// Add a title to the chart using 18pt Times New Roman Bold Italic font
c.addTitle("    Product Line Global Revenue", "Times New Roman Bold Italic", 18);

// Set the plotarea at (50, 55) with width 70 pixels less than chart width, and height 90 pixels
// less than chart height. Use a vertical gradient from light blue (f0f6ff) to sky blue (a0c0ff) as
// background. Set border to transparent and grid lines to white (ffffff).
c.setPlotArea(50, 55, c.getWidth() - 70, c.getHeight() - 90, c.linearGradientColor(0, 55, 0,
    c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);


// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);

// Set the axis stem to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);

// Configure x-axis label format
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(), "{value|mm/yyyy} ", Chart.StartOfMonthFilter(),
    "{value|mm}");

// Add axis title using 10pt Arial Bold Italic font
c.yAxis().setTitle("USD millions", "Arial Bold Italic", 10);

// Add a line layer to the chart using a line width of 2 pixels.
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);

// Add 3 data series to the line layer
layer.setXData(timeStamps);
layer.addDataSet(data0, 0xff3333, "Alpha");
layer.addDataSet(data1, 0x008800, "Beta");
layer.addDataSet(data2, 0x3333cc, "Gamma");

// Create the WebChartViewer object
WebChartViewer viewer = new WebChartViewer(request, "chart1");

// Output the chart
viewer.setChart(c, Chart.SVG);

// Output Javascript chart model to the browser to support tracking cursor
viewer.setChartModel(c.getJsChartModel());
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Track Line with Legend&lt;/title&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
&lt;script type="text/javascript"&gt;

//
// Use the window load event to set up the MouseMovePlotArea event handler
//
JsChartViewer.addEventListener(window, 'load', function() {
    var viewer = JsChartViewer.get('&lt;%=viewer.getId()%&gt;');

    // Draw track cursor when mouse is moving over plotarea
    viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove", "Now"],
    function(e) {
        this.preventDefault(e);   // Prevent the browser from using touch events for other actions
        trackLineLegend(viewer, viewer.getPlotAreaMouseX());
    });
});

//
// Draw track line with legend
//
function trackLineLegend(viewer, mouseX)
{
    // Remove all previously drawn tracking object
    viewer.hideObj("all");

    // The chart and its plot area
    var c = viewer.getChart();
    var plotArea = c.getPlotArea();

    // Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
    var xValue = c.getNearestXValue(mouseX);
    var xCoor = c.getXCoor(xValue);
    if (xCoor == null)
        return;

    // Draw a vertical track line at the x-position
    viewer.drawVLine("trackLine", xCoor, plotArea.getTopY(), plotArea.getBottomY(), "black 1px dotted");

    // Array to hold the legend entries
    var legendEntries = [];

    // Iterate through all layers to build the legend array
    for (var i = 0; i &lt; c.getLayerCount(); ++i)
    {
        var layer = c.getLayerByZ(i);

        // The data array index of the x-value
        var xIndex = layer.getXIndexOf(xValue);

        // Iterate through all the data sets in the layer
        for (var j = 0; j &lt; layer.getDataSetCount(); ++j)
        {
            var dataSet = layer.getDataSetByZ(j);

            // We are only interested in visible data sets with names, as they are required for legend entries.
            var dataName = dataSet.getDataName();
            var color = dataSet.getDataColor();
            if ((!dataName) || (color == null))
                continue;

            // Build the legend entry, consist of a colored square box, the name and the data value.
            var dataValue = dataSet.getValue(xIndex);
            legendEntries.push("&lt;nobr&gt;" + viewer.htmlRect(7, 7, color) + " " + dataName + ": " +
                ((dataValue == null) ? "N/A" : dataValue.toPrecision(4)) + viewer.htmlRect(20, 0) + "&lt;/nobr&gt; ");

            // Draw a track dot for data points within the plot area
            var yCoor = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis());
            if ((yCoor != null) &amp;&amp; (yCoor &gt;= plotArea.getTopY()) &amp;&amp; (yCoor &lt;= plotArea.getBottomY()))
            {
                viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center,
                    viewer.htmlRect(7, 7, color));
            }
        }
    }

    // Create the legend by joining the legend entries.
    var legend = "&lt;nobr&gt;[" + c.xAxis().getFormattedLabel(xValue, "mm/dd/yyyy") + "]" + viewer.htmlRect(20, 0) +
        "&lt;/nobr&gt; " + legendEntries.reverse().join("");

    // Display the legend on the top of the plot area
    viewer.showTextBox("legend", plotArea.getLeftX(), plotArea.getTopY(), JsChartViewer.BottomLeft, legend,
        "width:" + plotArea.getWidth() + "px;font:bold 11px Arial;padding:3px;-webkit-text-size-adjust:100%;");
}

&lt;/script&gt;
&lt;div style="font-size:18pt; font-family:verdana; font-weight:bold"&gt;
    Track Line with Legend
&lt;/div&gt;
&lt;hr style="border:solid 1px #000080" /&gt;
&lt;div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em"&gt;
    &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
&lt;/div&gt;
&lt;!-- ****** Here is the chart image ****** --&gt;
&lt;%=viewer.renderHTML(response)%&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div></div><br>
<hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div></body>
</HTML>
